<template>
  <div style="background-color: #DD4A68;">
  <nav1>
    <ul>
      <li><a href="#">&nbsp;&nbsp;&nbsp;首&nbsp;&nbsp;页&nbsp;&nbsp;&nbsp;</a></li>
    </ul>
  </nav1>
  </div>
</template>
<script>
export default {
  name: 'menuTree',
};
</script>
<style>
nav1 {
  padding: 0px;
  background-color: #DD4A68;
  font-size: 16px;
}
nav1 ul
{
  margin: 0px auto;
  text-align:center;
  z-index: 10000;
}
nav1 ul ul
{
  margin-left:-15px;
  display: none;
}
nav1 ul li:hover>ul
{
  display:block;
}
nav1 ul li
{
  float:left;
  display:block;
  border-left: 1px solid #778;
  border-bottom: 1px solid #778;
  background:#333;
  padding:10px 15px;
}
nav1 ul li:hover
{
  background:#005387;
}
nav1 ul {
  background: #333;
  padding: 0 0px;
  border-radius: 10px;
  list-style: none;
  position: relative;
  display: inline-table;
}
nav1 ul li a {
  display: block; padding: 0px 0px;
  color: #fff; text-decoration: none;
}
nav1 ul li:hover > a
{
  color: orange;
}
nav1 ul ul {
  padding: 0;
  position: absolute; top: 100%;
}
nav1 ul ul li {
  float: none;
  position: relative;
}
nav1 ul ul ul {
  position: absolute; left: 100%; top:0;
  margin-left:0px;
}
</style>
